<template>
    <el-dialog title="新增员工" :visible.sync="showDialog">
        <el-form :model="formData" :rules="rules" ref="formData">
            <el-form-item label="姓名" prop="username">
              <el-input style="width: 50%;margin-left: 28px" placeholder="请输入姓名" v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input style="width: 50%;margin-left: 15px" placeholder="请输入手机号" v-model="formData.mobile"></el-input>
            </el-form-item>
            <el-form-item label="入职时间" prop="timeOfEntry">
              <el-date-picker
                style="width: 50%"
                placeholder="请输入入职时间"
                v-model="formData.timeOfEntry"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="聘用形式" prop="formOfEmployment">
              <el-select style="width: 50%" placeholder="请选择" v-model="formData.formOfEmployment">
                <el-option v-for="item in EmployeeEnum.hireType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工号" prop="workNumber">
              <el-input style="width: 50%;margin-left: 28px" placeholder="请输入工号" v-model="formData.workNumber"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="departmentName">
              <el-input 
              style="width: 50%;margin-left: 28px" 
              placeholder="请输入部门" 
              v-model="formData.departmentName" 
              @focus="getDepartments"
              >
              </el-input>
              <el-tree 
                v-if="showTree"
                :data="treeData" 
                default-expand-all 
                :props="{ label: 'name' }"
                v-loading="loading"
                @node-click="selectNode"
                style="width: 50%;margin-left: 77px;border: 1px solid #DCDFE6;border-top:none;"
                >
                </el-tree>
            </el-form-item>
            <el-form-item label="转正时间" prop="correctionTime">
              <el-date-picker
                style="width: 50%"
                placeholder="请输入转正时间"
                v-model="formData.correctionTime"
              ></el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getDepartments } from '@/api/departments'
    import { addEmployees } from '@/api/employees'
    import { tranListToTreeData } from '@/utils/index'
    import EmployeeEnum from '@/api/constant/employees'
    export default {
        props: {
            showDialog: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                EmployeeEnum,
                treeData: [],// 存储树形数据
                showTree: false,
                loading: false,
                formData: {
                    username: "",
                    mobile: "",
                    formOfEmployment: "",
                    workNumber: "",
                    departmentName: "",
                    timeOfEntry: "",
                    correctionTime: "",
                },
                rules: {
                    username: [
                      { required: true, message: "姓名不能为空", trigger: "blur" },
                      {
                        min: 1,
                        max: 4,
                        message: "姓名应在1-4位",
                      },
                    ],
                    mobile: [
                      { required: true, message: "手机号不能为空", trigger: "blur" },
                      {
                        pattern: /^1[3-9]\d{9}$/,
                        message: "手机号格式不正确",
                        trigger: "blur",
                      },
                    ],
                    formOfEmployment: [
                      { required: true, message: "聘用形式不能为空", trigger: "blur" },
                    ],
                    workNumber: [
                      { required: true, message: "工号不能为空", trigger: "blur" },
                    ],
                    departmentName: [
                      { required: true, message: "部门不能为空", trigger: "change" },
                    ],
                    timeOfEntry: [{ required: true, message: "入职时间", trigger: "blur" }],
            }
            }
        },
        methods: {
          // 部门获取数据
          async getDepartments () {
            try {
              this.showTree = true;
            this.loading = true;
            let { depts } = await getDepartments();
            this.treeData = tranListToTreeData(depts, "");
            this.loading = false
            } catch {
              this.$message({
              showClose: true,
              message: '好像出了点小问题(￣▽￣)"',
              type: 'error'
            });
            }
            
          },
          // 部门的回调
          selectNode(node) {
          this.formData.departmentName = node.name;
          this.showTree = false
        },
        // 确定按钮，上传数据
        async btnOk() {
          try {
            await this.$refs.formData.validate();
            await addEmployees(this.formData);
            // 使用 this.$parent 可以直接调用父组件的实例
            this.$parent.getEmployeeList();
            this.$parent.showDialog = false
          } catch (error){
              this.$message({
              showClose: true,
              message: error,
              type: 'error'
          })
          }
        },
        // 取消上传数据
        btnCancel() {
          this.formData = {
          username: "",
          mobile: "",
          formOfEmployment: "",
          workNumber: "",
          departmentName: "",
          timeOfEntry: "",
          correctionTime: "",
          };
          this.$refs.addEmployee.resetFields();
          // 返回父组件重新设置showdialog
          this.$emit("update:showDialog", false);
        }
        },
        
    }
</script>

<style scoped>

</style>